<template>
  <div id="bar" style="height: 400px; width: 400px" ref="bar"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    bars: {
      type: Object,
    },
  },
  data() {
    return {
      chartsData:{}
    };
  },
  watch:{
    bars:function(val){
      console.log(val);
      // this.chartsData =val
       this.setCharts();
    return val
    },
  },
  mounted() {
   
  },
  methods: {
    setCharts() {
      // 基于准备好的dom，初始化echarts实例
      let chart = this.$refs.bar;
      var myChart = echarts.init(chart);
      // 绘制图表
      //用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等。
      // option 是个大的 JavaScript 对象。

      let option = {
        xAxis: {
          //
          type: "category",
          data: this.bars.x, //x抽上的数据
        },
        yAxis: {
          type: "value",
        },

        series: [
          //
          {
            data: this.bars.data,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };

      // 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style>
#bar {
  border: 1px solid red;
}
</style>